<template>
  <div class="app-container">
    <!-- 搜索 -->
    <page-search ref="searchRef" :search-config="searchConfig" @query-click="handleQueryClick"
      @reset-click="handleResetClick" :isShowBtn="false">
      <template #reward_type="scope">
        <!-- <el-select v-model="searchParam[scope.prop]" @change="setSearchParam()" v-bind="scope">
          <template v-for="option in typeList" :key="option.value">
            <el-option :label="option.label" :value="option.value" />
          </template>
</el-select> -->
        <el-radio-group v-model="searchParam.reward_type" @change="setSearchParam()">
          <template v-for="item in typeList">
            <el-radio-button :label="t(`label.${item.value}`)" :value="item.value" />
          </template>
        </el-radio-group>
      </template>
    </page-search>
    <!-- 表格 -->
    <PageContent ref="contentRef" :content-config="contentConfig" :gridOptions="gridOptions" @addClick="handleAddClick"
      @edit-click="handleEditClick" @export-click="handleExportClick" @toolbarClick="handleToolbarClick"
      @operat-click="handleOperatClick">
      <template #vip_level_id="scope">
        {{ getTypeName(scope.row[scope.prop])?.name }}
      </template>
      <template #reward_type="scope">
        <el-tag type="success">{{ t(`label.${scope.row[scope.prop]}`) }}</el-tag>
      </template>
    </PageContent>
    <!-- 编辑 -->
    <page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick">
      <template #reward_type="scope">
        <el-select v-model="param[scope.prop]" @change="changeAdd(param,'edit')">
          <template v-for="option in typeList" :key="option.value">
            <el-option :label="t(`label.${option.value}`)" :value="option.value" />
          </template>
        </el-select>
      </template>
      <template #vip_level_id="scope">
        <el-select v-model="param[scope.prop]" @change="changeAdd(param,'edit')">
          <template v-for="option in levelList" :key="option.id">
            <el-option :label="option.name" :value="option.level" />
          </template>
        </el-select>
      </template>
    </page-modal>
    <!-- 新增 -->
    <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
      <template #reward_type="scope">
        <el-select v-model="param[scope.prop]" @change="changeAdd(param,'add')">
          <template v-for="option in typeList" :key="option.value">
            <el-option :label="t(`label.${option.value}`)" :value="option.value" />
          </template>
        </el-select>
      </template>
      <template #vip_level_id="scope">
        <el-select v-model="param[scope.prop]" @change="changeAdd(param,'add')">
          <template v-for="option in levelList" :key="option.id">
            <el-option :label="option.name" :value="option.level" />
          </template>
        </el-select>
      </template>
    </page-modal>
    <transferBalance ref="trBaRef" @submit-click="handleSubmitClick" />
  </div>
</template>

<script setup>
import Api from '@/api/operations/reward'
import DictApi from '@/api/dict'
import contentConfig from "./config/content";
import searchConfig from "./config/search";
import editModalConfig from "./config/edit";
import addModalConfig from "./config/add";
import usePage from "@/hooks/usePage";
import { tableHeightAutoAdjust } from '@/utils/common'
import { onMounted } from "vue";

defineOptions({
  name: "operationsLevels",
  inheritAttrs: false,
});

const { t } = useI18n();
t('label.Daily check-in')
const gridOptions = reactive({})

const { searchRef, contentRef, addModalRef, editModalRef,
  handleQueryClick, handleResetClick, handleAddClick,
  handleSubmitClick, handleExportClick, } = usePage();
const handleEditClick = (row) => {
  // 模拟根据id获取数据进行填充
  for (let i in param.value) {
    console.log(i);
    param.value[i] = row[i] || ''
  }
  editModalRef.value?.setModalVisible(row);
}
const handleOperatClick = ({ name, column, row }) => {
  console.log('handleOperatClick', name, column, row);
  if (name === 'note') {
    ElMessageBox.prompt(t('hint.71'), t('hint.1'), {
      inputPattern: /\S/,
      inputErrorMessage: t('hint.71'),
      inputPlaceholder: row.note
    }).then(({ value }) => {
      console.log(value);
      Api.put({ id: row.id, note: value }).then(s => {
        handleQueryClick()
      })

    })
  }
}
const searchParam = ref({ reward_type: 'daily_check_in' })
const setSearchParam = () => {
  searchRef.value.setParams(searchParam.value)
  handleQueryClick(searchParam.value)
}
const param = ref({
  reward_type: '',
  vip_level_id: ''
})
const changeAdd = (obj, type) => {
  if (type === 'edit') {
    editModalRef.value?.setModalVisible(obj);
  } else if (type === 'add') {
    addModalRef.value?.setModalVisible(obj);
  }
}
const levelList = ref([])
const typeList = ref([])

const getType = async () => {
  const leveleData = await DictApi.getLevele()
  levelList.value = leveleData.data
  const typeData = await Api.getType()
  console.log('typeData.data===>',typeData.data)
  typeList.value = typeData.data
  setSearchParam()
}

const getTypeName = (id) => {
  const obj = levelList.value.find(item => item.id === id)
  return obj
}
onMounted(() => {
  getType()
  // 确保在组件挂载后立即设置高度
  tableHeightAutoAdjust(gridOptions);
})
</script>

<style></style>